let laypage = layui.laypage;
let form = layui.form;
let layer = layui.layer;

// **************************************************加载列表
// 接口文档：分页数据
//    pagenum：页面
//    pagesize：一页要多少条数据
// 好处：后台减少数据量请求！
let data = {
  pagenum: 1,
  pagesize: 3
};
list();

function list() {
  $.ajax({
    url: "/my/article/list",
    data: data,
    success: function(res) {
      if (res.status == 0) {
        let str = "";
        res.data.forEach(ele => {
          str += `<tr>
                  <td>${ele.title}</td>
                  <td>${ele.cate_name}</td>
                  <td>${ele.pub_date.slice(0, ele.pub_date.length - 4)}</td>
                  <td>${ele.state}</td>
                  <th>
                    <a href="/article/edit/edit.html?id=${ele.Id}" class="layui-btn layui-btn-xs">编辑</a>
                    <button data-id="${ele.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger btnDelete">删除</button>
                  </th>
                </tr>`;
        });

        $("tbody").html(str);

        // 便于维护代码
        page(res.total);
      }
    }
  });
}


// *************************************************分页功能
// layui: form  layer
// 分页模块：
function page(numb) {
  laypage.render({

    elem: 'page',
    count: numb,
    // 每页都多少页
    limit: data.pagesize,
    // 当前在第几页
    curr: data.pagenum,
    // 给用户提供选择每页显示多少条；
    limits: [2, 3, 5, 10],

    // 功能选择
    layout: ['prev', 'page', 'next', 'count', 'limit'],

    // 当用户点击时候专门函数：执行用户点击行为
    // 列表第一次加载的时候，jump也会执行；
    jump: function(obj, key) {
      // key:  true第一次执行；undefined用户点击

      // 用户点击
      if (key == undefined) {
        // 当前分页现在状态：页码、要求几条数据、数据总量
        // obj.curr 可以获取点到用户哪个页码；
        data.pagenum = obj.curr;
        data.pagesize = obj.limit;


        list();
      }
    }
  });
}



// ********************************************************分类
$.ajax({
  url: "/my/article/cates",
  success: function(res) {
    if (res.status == 0) {
      let str = `<option value="">请选择文章类别</option>`;
      res.data.forEach(item => {
        str += `<option value="${item.Id}">${item.name}</option>`;
      });
      $("#category").html(str);

      // form模块：如果表单元素动态插入，好看样式不会跟着动态渲染；
      // 需要调用渲染更新方法；
      form.render("select");
    }
  }
});
$("form").on("submit", function(e) {
  e.preventDefault();

  // 1.收集数据，设置给 全局变量data,可选参数；
  let arr = $(this).serializeArray();

  // 2.设置给全局变量data;
  data.cate_id = arr[0].value;
  data.state = arr[1].value;
  // 默认回到该选择项条件下  第一页；
  data.pagenum = 1;

  // 再次发出ajax:
  list();
});



// *******************************************************删除
$("tbody").on("click", ".btnDelete", function() {


  layer.confirm("你确认要删除么?", (index) => {
    // 1. 获取点击对应id
    let id = $(this).attr("data-id");

    // 2.发送请求
    $.ajax({
      url: "/my/article/delete/" + id,
      success: function(res) {
        layer.msg(res.message);
        if (res.status == 0) {

          data.pagenum = 1;
          list();
        }
      }
    })
  });


});




// ********************************************************编辑
//   1.很多文章：进入同一个HTML页面URL地址，显示不同的内容，给URL地址放入参数 id;
//   2.进入页面内，通过JS方式 获取id值
//   3.发出ajax请求，获取该文章详情数据
//   4.对form表单赋值！
//   5.修改后提交，和新增一样；（多个一个参数：id）